<template>
  <div class="container">
    <div class="tabs-lb">
      <span>能力看板</span>
      <button @click="switchChange" class="btn_operation_add" v-if="this.switchState">图形展示</button>
      <button @click="switchChange" class="btn_operation_add" v-else-if="!this.switchState">表格展示</button>
    </div>

    <div class="bottom">
      <!-- 表格展示 -->
      <div class="tableBox" v-if="this.switchState">
        <el-table :data="tableData" border stripe height="800">
          <el-table-column prop="jkbh" label="接口编号" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="jkmc" label="接口名称" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ak" label="AK" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="cjdwmc" label="调用单位" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="qqsj" label="调用时间" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="qqjg" label="请求结果" align="center" :show-overflow-tooltip="true"></el-table-column>
          <!-- <el-table-column
            prop="qqcs"
            label="请求状态"
            align="center"
            :show-overflow-tooltip="true"
          ></el-table-column>-->
          <el-table-column
            prop="sfwcsqq"
            label="是否为测试请求"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="{ row }">
              <span>{{ row.sfwcsqq === "Y" ? "是" : "否" }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="page">
          <el-pagination
            background
            @size-change="changePageSize"
            @current-change="changePageNum"
            :current-page="form.pageNum"
            :page-sizes="[100, 200, 500, 1000]"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <!-- 图形展示 -->
      <div class="echartBox" v-else-if="!this.switchState">
        <div class="searchBox">
          <el-form ref="echartform" :model="echartform" label-width="80px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="接口编号">
                  <el-select
                    v-model="echartform.jkbh"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in jkList"
                      :key="item.jkbh"
                      :label="item.jkmc"
                      :value="item.jkbh"
                    ></el-option>
                  </el-select>
                  <!-- <el-input
                    v-model="echartform.jkbh"
                    placeholder="请输入接口编号"
                    clearable
                  ></el-input>-->
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="应用系统">
                  <el-select
                    v-model="echartform.yyxt"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in yyxtList"
                      :key="item.yyxt"
                      :label="item.yyxt"
                      :value="item.yyxt"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="选择时间">
                  <el-date-picker
                    v-model="echartform.time"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button @click="cz">重置</el-button>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="requestForwardingStatisticsBox">
          <div class="requestStatisticsBox">
            <div class="contentText">
              <div class="leftText" v-if="this.qqzs !== 0">
                <p>请求成功率</p>
                <p>{{ ((this.qqcgs / this.qqzs) * 100).toFixed(2) }}%</p>
              </div>
              <div class="centerText">
                <p>请求成功总数</p>
                <div class="csText">
                  <p>{{ this.qqzs }}次数</p>
                  <p>{{ this.qqcgs }}次数</p>
                  <p>{{ this.qqsbs }}次数</p>
                </div>
              </div>
              <!-- <div class="rightText">
                <div class="ztText">
                  <p>状态码4xx数</p>
                  <p>状态码5xx数</p>
                </div>

                <div class="csText">
                  <p>次数</p>
                  <p>次数</p>
                </div>
              </div>-->
            </div>
            <requestStatisticsEchart ref="requestStatisticsEchartRender" />
          </div>
          <div class="forwardingsticsBox" v-if="false">
            <div class="contentText">
              <div class="leftText">
                <p>转发成功率</p>
                <p>99%</p>
              </div>
              <div class="centerText">
                <p>转发成功总数</p>
                <div class="csText">
                  <p>{{ this.qqzs }}</p>
                  <p>4次数</p>
                  <p>4次数</p>
                </div>
              </div>
              <div class="rightText">
                <div class="ztText">
                  <p>状态码4xx数</p>
                  <p>状态码5xx数</p>
                </div>

                <div class="csText">
                  <p>4次数</p>
                  <p>4次数</p>
                </div>
              </div>
            </div>
            <forwardingsticsEchart ref="forwardingsticsEchartRender" />
          </div>
        </div>
        <div class="callVolumeStatisticsBox">
          <callVolumeStatisticsEchart ref="callVolumeStatisticsEchartRender" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import jkglService from "@/api/jkgl";
import requestStatisticsEchart from "./components/requestStatisticsEchart.vue";
import forwardingsticsEchart from "./components/forwardingsticsEchart.vue";
import callVolumeStatisticsEchart from "./components/callVolumeStatisticsEchart.vue";
import nlkbService from "@/api/nlkb";
export default {
  components: {
    requestStatisticsEchart,
    forwardingsticsEchart,
    callVolumeStatisticsEchart,
  },
  data() {
    return {
      jkList: [],
      yyxtList: [],
      qqzs: "",
      qqsbs: "",
      qqcgs: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近1小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近24小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      echartform: {
        jkbh: "",
        yyxt: "",
        time: ["", ""],
      },
      switchState: false,
      tableData: [],
      form: {
        pageNum: 1,
        pageSize: 100,
        filter: {},
      },
      total: 0,
    };
  },

  mounted() {
    this.getjkList();
    this.getQueryYyxtmc();
    // this.getListData();
  },

  methods: {
    //获取接口编号下拉框数据
    getjkList() {
      const params = {
        pageNum: 1,
        pageSize: 1000,
        orderby: "",
        filter: {
          jkflbh: "",
          gjc: "",
        },
      };
      jkglService
        .queryJkdy(params)
        .then((res) => {
          this.jkList = res.list;
          // console.log(this.jkList, 111);
          this.echartform.jkbh = this.jkList[0].jkbh;
          this.nowAndSevenDay();
          this.changePageNum(1);
          this.onSubmit();

        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //获取应用系统下拉框数据
    getQueryYyxtmc() {
      const params = {};
      nlkbService
        .getQueryYyxtmc(params)
        .then((res) => {
          this.yyxtList = res;
          this.echartform.yyxt = this.yyxtList[0].yyxt;
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //获取当前和前七天时间
    nowAndSevenDay() {
      // 获取当前时间
      const currentDate = new Date();

      // 获取前七天的时间
      const previousDate = new Date();
      previousDate.setDate(currentDate.getDate() - 7);

      // 格式化时间为 "YYYY-MM-DD HH:MM:SS" 的格式
      const formatDateTime = (date) => {
        const year = date.getFullYear();
        const month = padZero(date.getMonth() + 1);
        const day = padZero(date.getDate());
        const hours = padZero(date.getHours());
        const minutes = padZero(date.getMinutes());
        const seconds = padZero(date.getSeconds());
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      };

      // 在个位数前补零
      const padZero = (num) => {
        return (num < 10 ? "0" : "") + num;
      };

      // 输出当前时间和前七天的时间
      this.echartform.time[0] = formatDateTime(previousDate);
      this.echartform.time[1] = formatDateTime(currentDate);

      this.$set(this.echartform.time, 0, formatDateTime(previousDate));
      this.$set(this.echartform.time, 1, formatDateTime(currentDate));
    },
    //图表切换
    switchChange() {
      this.switchState = !this.switchState;
      if (!this.switchState) {
        this.onSubmit();
      }
    },
    //表格数据获取
    getListData() {
      const params = { ...this.form };
      nlkbService
        .queryNlkbjl(params)
        .then((res) => {
          this.tableData = res.list;
          this.total = res.total;
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //分页
    changePageNum(val) {
      this.form.pageNum = val;
      this.getListData();
    },
    //分页
    changePageSize(val) {
      this.form.pageSize = val;
      this.form.pageNum = 1;
      this.getListData();
    },
    //查询
    onSubmit() {
      this.getQueryQqtj();
      this.getQueryDyltj();
    },
    //重置
    cz() {
      this.echartform.jkbh = "";
      this.echartform.yyxt = "";
      this.echartform.time = null;
    },
    //请求统计数据获取
    getQueryQqtj() {
      const params = { jkbh: "", yyxt: "", jssj: "", kssj: "" };
      params.jkbh = this.echartform.jkbh;
      params.yyxt = this.echartform.yyxt;
      params.kssj = this.echartform.time[0];
      params.jssj = this.echartform.time[1];
      nlkbService
        .queryQqtj(params)
        .then((res) => {
          this.qqzs = res.qqzs;
          this.qqsbs = res.qqsbs;
          this.qqcgs = res.qqcgs;
          this.$refs.requestStatisticsEchartRender.init(res);
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
    //调用量统计数据获取
    getQueryDyltj() {
      const params = { jkbh: "", yyxt: "", jssj: "", kssj: "" };
      params.jkbh = this.echartform.jkbh;
      params.yyxt = this.echartform.yyxt;
      params.kssj = this.echartform.time[0];
      params.jssj = this.echartform.time[1];
      nlkbService
        .queryDyltj(params)
        .then((res) => {
          this.$refs.callVolumeStatisticsEchartRender.init(res);
        })
        .catch((err) => {
          !err.isError &&
            this.$message({ type: "warning", message: err.message });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  .bottom {
    padding: 10px;
    margin-top: 20px;
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;

    .requestForwardingStatisticsBox {
      width: 100%;
      display: flex;
      // justify-content: space-between;
      justify-content: center;
      .requestStatisticsBox {
        width: 49%;
        height: 300px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        position: relative;
      }
      .forwardingsticsBox {
        width: 49%;
        height: 300px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        position: relative;
      }
      .contentText {
        z-index: -1;
        .leftText {
          position: absolute;
          top: 130px;
          left: 110px;
          display: flex;
          flex-direction: column;
          align-items: center;
          p {
            font-size: 16px;
            font-weight: 600;
          }
        }
        .centerText {
          width: 200px;
          height: 100px;
          padding-right: 10px;
          // border-right: 1px solid #d3d3d3;

          position: absolute;
          top: 80px;
          left: 305px;
          display: flex;
          justify-content: space-between;
          p {
            font-size: 16px;
          }
          .csText {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
        .rightText {
          margin-left: 10px;
          width: 200px;
          height: 60px;
          position: absolute;
          top: 120px;
          left: 505px;
          display: flex;
          justify-content: space-between;
          p {
            font-size: 16px;
            color: #a9a9a9;
          }
          .ztText {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
          .csText {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          }
        }
      }
    }
    .callVolumeStatisticsBox {
      margin-top: 20px;
      width: 100%;
      height: 300px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }
    .page {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>